class Xiangqing{
	constructor(){
		this.url="http://localhost/project/data/xiangqing.json";
	    this.strid=window.location.search;
	    this.goodid=(this.strid.split("="))[1];
		this.load()
	}
	load(){
		var that=this;
		$.ajax({
			  url:this.url,
			  success:function(res){
				  that.res=res;
				  that.display();
				  
			  }
		})
	}
	display(){
		var str="";
		var strsmall="";
		var xqpic="";
		var canshu="";
		var tit_h2="";
		var tit_p="";
		for(var i=0;i<this.res.length;i++){
			if(this.res[i].id==this.goodid){
				
				for(var j=0;j<this.res[i].img.length;j++){
					 str+=`<img src="${this.res[i].img[j]}"/>`
					 strsmall+=`<li><div><a><img src="${this.res[i].img[j]}"/></a></div></li>`
				}
				for(var k=0;k<this.res[i].pic.length;k++){
					 xqpic+=`<img src="${this.res[i].pic[k]}"/>`
				}
				
				canshu+=` <tr>
								<td class="label"><div>商品名称:</div></td>
								<td>${this.res[i].info}</td>
							</tr>
							<tr>
									<td class="label"><div>功效:</div></td>
									<td>${this.res[i].gongxiao}</td>
								</tr>
							<tr>
									<td class="label"><div>规格:</div></td>
									<td>${this.res[i].guige}</td>
								</tr>
							<tr>
									<td class="label"><div>生产日期:</div></td>
									<td>${this.res[i].riqi}</td>
								</tr>
							<tr>
									<td class="label"><div>商品包装:</div></td>
									<td>${this.res[i].baozhuang}</td>
								</tr>
							<tr>
									<td class="label"><div>特殊说明:</div></td>
									<td>${this.res[i].shuoming}</td>
							</tr>`
				tit_h2+=`<font>[保税发货]</font><em>${this.res[i].info}</em>`
				tit_p+=`${this.res[i].infosub}`
			}
		}
		 $(".pro_bigpic #small a").html(str)
		 $(".pro_bigpic #big").html(str)
		 $(".thumb_list ul").html(strsmall)
		 $("#pro_param .xq_pic").html(xqpic)
		 $("#pro_param .pro_attr table").html(canshu)
		 $(".pro_main .pro_title h2").html(tit_h2)
		 $(".pro_main .pro_title p").html(tit_p)
		
	}
	
}
new Xiangqing();



 
// 指向小图大图发生变化,小图出现边框效果
$(".thumb_list ul").on("mouseenter","li",function(){
	$(".pro_bigpic #small a").find("img").css("display","none").eq($(this).index()).css("display","block")
	$(".pro_bigpic #big").find("img").css("display","none").eq($(this).index()).css("display","block")
	$(".thumb_list ul").find("li").attr("class","").eq($(this).index()).attr("class","active")	
})


// 放大镜效果
$(".pro_bigpic #small").on("mouseenter",function(){
	$(".pro_bigpic #move").css("display","block")
	//console.log($('.pro_bigpic #small').width())
	$(".pro_bigpic #big").css({
		"display":"block",
		"left":$('.pro_bigpic #small').width()
	})
})
$(".pro_bigpic #small").on("mouseleave",function(){
	$(".pro_bigpic #move").css("display","none")
	//console.log($('.pro_bigpic #small').width())
	$(".pro_bigpic #big").css({
		"display":"none"
	})
})

$(".pro_bigpic #small").on("mousemove",function(eve){
	var e=eve||window.event;
	//设置滑块可以移动
	var mouseX=e.pageX;
	var mouseY=e.pageY;
	var leftM=mouseX-$(this).offset().left-$(".pro_bigpic #move").outerWidth()/2;
	var topM=mouseY-$(this).offset().top-$(".pro_bigpic #move").outerHeight()/2;
	//为滑块设置边界
	if(topM<=0){
		topM=0;
	}else if(topM>=$(this).outerHeight()-$(".pro_bigpic #move").outerHeight()){
		topM=$(this).outerHeight()-$(".pro_bigpic #move").outerHeight()+'px';
	}
	if(leftM<=0){
		leftM=0;
	}else if(leftM>=$(this).outerWidth()-$(".pro_bigpic #move").outerWidth()){
		leftM=$(this).outerWidth()-$(".pro_bigpic #move").outerWidth()+'px';
	}
	$(".pro_bigpic #move").css("left",leftM)
	$(".pro_bigpic #move").css("top",topM)
	//根据比例设置右边图片的移动
	//大图向左移动为负值
	//大图移动的距离是比例乘大图可以移动的范围
	//小图中滑块距离左侧的位置和整个小图中可以移动距离的比例
	//
	//小图移动的比例
	var pX=leftM/($(this).outerWidth()-$(".pro_bigpic #move").outerWidth());
	var pY=topM/($(this).outerHeight()-$(".pro_bigpic #move").outerHeight());
	$("#big img").css("left",-pX*($("#big img").outerWidth()-$("#big").outerWidth()))
	$("#big img").css("top",-pY*($("#big img").outerHeight()-$("#big").outerHeight()))
	
})

